<%@ page contentType="text/html;charset=UTF-8" %>
<%@ include file="/WEB-INF/views/include/taglib.jsp"%>
<html>
<head>
	<title>乐购商品管理</title>
	<meta name="decorator" content="default"/>
	<script id="selectTpl" type="x-tmpl-mustache">
			<div class="control-group"><label class="control-label">{{data.property.name}}：</label><div class="controls">

			<input type="hidden" name="hkShopProductPropertyList[{{idx}}].categoryProperty.id" value="{{data.id}}">
			<input type="hidden" name="hkShopProductPropertyList[{{idx}}].property.id" value="{{data.property.id}}">
			<select id="{{id}}" name="hkShopProductPropertyList[{{idx}}].propertyvalue" class="input-medium">

			{{#data.property.hkShopPropertyValueList}}
			  <option   value="{{id}}" > {{content}}</label>
			{{/data.property.hkShopPropertyValueList}}

			</select>

			</div></div>
	</script>
	<script id="checkTpl" type="x-tmpl-mustache">
			<div class="control-group"><label class="control-label">{{data.property.name}}：</label><div class="controls"  >
			<input type="hidden" name="hkShopProductPropertyList[{{idx}}].categoryProperty.id" value="{{data.id}}">
			<input type="hidden" name="hkShopProductPropertyList[{{idx}}].property.id" value="{{data.property.id}}">
			{{#data.property.hkShopPropertyValueList}}
			<input type="checkbox" name="hkShopProductPropertyList[{{idx}}].propertyvalue" value="{{id}}"/><label>{{content}}</label>
			{{/data.property.hkShopPropertyValueList}}
			  </div></div>
	</script>
	<script type="text/javascript">
		$(document).ready(function() {
			//$("#name").focus();
			$("#inputForm").validate({
				submitHandler: function(form){
					loading('正在提交，请稍等...');
					form.submit();
				},
				errorContainer: "#messageBox",
				errorPlacement: function(error, element) {
					$("#messageBox").text("输入有误，请先更正。");
					if (element.is(":checkbox")||element.is(":radio")||element.parent().is(".input-append")){
						error.appendTo(element.parent().parent());
					} else {
						error.insertAfter(element);
					}
				}
			});


		});
        function  categoryIdTreeselectCallBack(v, h, f,nodes){
             var cid=nodes[0].id;
            $("#categoryPid").val(nodes[0].pId);
            loadProtity(cid);
        }



        //加载属性
        function  loadProtity(cid) {
            var _tplid='';
            var _tpl =''
                $.ajax({
                    type : "post",
                    async : false,
                    url : "${ctx}/shop/category/hkShopCategoryProperty/getJson",
                    data : {
                        'category.id' : cid
                    },
                    dataType : "json",
                    success : function(msg) {
                        $('#tab3').html("");
                        for (var i = 0; i < msg.length; i++) {
                            _tplid='';
                            _tpl =''

                            if(msg[i].property.ismultiple==0){
                                _tpl= $('#selectTpl').html();
                                _tplid="p"+i;
                                $("#"+_tplid).empty();
                                var rendered = Mustache.render(_tpl, {data: msg[i],id:_tplid,idx:i});
                                $('#tab3').append(rendered);
                                $("#"+_tplid).select2();
                            }
                            else if(msg[i].property.ismultiple==1){
                                  _tpl = $('#checkTpl').html();
                                var rendered = Mustache.render(_tpl, {data: msg[i],idx:i});
                                $('#tab3').append(rendered);
                            }
                        }
                    },
                    error : function(json) {
                        $.jBox.alert("网络异常！");
                    }
                });
        }


        //加载规格颜色
        function  loadColor(cid) {

        }
	</script>
</head>
<body>
	<ul class="nav nav-tabs">
		<li><a href="${ctx}/shop/product/hkShopProduct/">乐购商品列表</a></li>
		<li class="active"><a href="${ctx}/shop/product/hkShopProduct/form?id=${hkShopProduct.id}">乐购商品<shiro:hasPermission name="shop:product:hkShopProduct:edit">${not empty hkShopProduct.id?'修改':'添加'}</shiro:hasPermission><shiro:lacksPermission name="shop:product:hkShopProduct:edit">查看</shiro:lacksPermission></a></li>
	</ul><br/>

	<form:form id="inputForm" modelAttribute="hkShopProduct" action="${ctx}/shop/product/hkShopProduct/save" method="post" class="form-horizontal">
		<form:hidden path="id"/>
		<form:hidden path="categoryPid"/>

		<sys:message content="${message}"/>
		<div class="tabbable"> <!-- Only required for left/right tabs -->
		<ul class="nav nav-tabs">
			<li class="active"><a href="#tab1" data-toggle="tab">商品基本信息</a></li>
			<li><a href="#tab2" data-toggle="tab">详细信息</a></li>
			<li><a href="#tab3" data-toggle="tab">属性信息</a></li>
			<li><a href="#tab4" data-toggle="tab">商品相册</a></li>
			<li><a href="#tab5" data-toggle="tab">sku信息</a></li>
		</ul>
		<div class="tab-content">
			<div class="tab-pane active" id="tab1">
				<div class="control-group">
					<label class="control-label">品牌：</label>
					<div class="controls">
						<form:select path="brand.id" class="input-xlarge ">
							<form:option value="" label=""/>
							<form:options items="${brands}" itemLabel="name" itemValue="id" htmlEscape="false"/>
						</form:select>

					</div>
				</div>

				<div class="control-group">
					<label class="control-label">分类：</label>
					<div class="controls">
						<sys:treeselect   id="categoryId" name="category.id"   labelName="category.name" labelValue="${hkShopProduct.category.name}" value="${hkShopProduct.category.id}"
										  title="分类" url="/shop/category/hkShopCategory/treeData"   cssClass="" allowClear="true"/>

					</div>
				</div>
				<div class="control-group">
					<label class="control-label">名称：</label>
					<div class="controls">
						<form:input path="title" htmlEscape="false" maxlength="200" class="input-medium "/>
					</div>
				</div>
				<div class="control-group">
					<label class="control-label">副标题：</label>
					<div class="controls">
						<form:input path="subtitle" htmlEscape="false" maxlength="200" class="input-xlarge "/>
					</div>
				</div>
				<%--<div class="control-group">
					<label class="control-label">包装清单：</label>
					<div class="controls">
						<form:textarea path="listing" htmlEscape="false" rows="4" maxlength="1000" class="input-medium "/>
					</div>
				</div>--%>
				<%--<div class="control-group">
					<label class="control-label">商品参数：</label>
					<div class="controls">
						<form:textarea path="parameter" htmlEscape="false" rows="4" maxlength="1000" class="input-medium "/>
					</div>
				</div>--%>
				<div class="control-group">
					<label class="control-label">状态：</label>
					<div class="controls">
						<form:select path="state" class="input-xlarge ">
							<form:option value="" label=""/>
							<form:options items="${fns:getDictList('hk_shop_state')}" itemLabel="label" itemValue="value" htmlEscape="false"/>
						</form:select>
					</div>
				</div>
				<div class="control-group">
					<label class="control-label">售后服务：</label>
					<div class="controls">
						<form:textarea path="afterService" htmlEscape="false" rows="2" maxlength="2000" class="input-xlarge "/>
					</div>
				</div>
				<%--<div class="control-group">
					<label class="control-label">商品主图：</label>
					<div class="controls">
						<form:hidden id="imgSrc" path="imgSrc" htmlEscape="false" maxlength="200" class="input-xlarge"/>
						<sys:ckfinder input="imgSrc" type="images" uploadPath="/shop/product" selectMultiple="false"/>
					</div>
				</div>--%>
				<div class="control-group">
					<label class="control-label">乐币：</label>
					<div class="controls">
						<form:input path="integral" htmlEscape="false" maxlength="11" class="input-xlarge "/>
					</div>
				</div>

				<div class="control-group">
					<label class="control-label">上架时间：</label>
					<div class="controls">
						<input name="upshelfTime" type="text" readonly="readonly" maxlength="20" class="input-medium Wdate "
							   value="<fmt:formatDate value="${hkShopProduct.upshelfTime}" pattern="yyyy-MM-dd HH:mm:ss"/>"
							   onclick="WdatePicker({dateFmt:'yyyy-MM-dd HH:mm:ss',isShowClear:false});"/>
					</div>
				</div>
				<div class="control-group">
					<label class="control-label">下架时间：</label>
					<div class="controls">
						<input name="downshelfTime" type="text" readonly="readonly" maxlength="20" class="input-medium Wdate "
							   value="<fmt:formatDate value="${hkShopProduct.downshelfTime}" pattern="yyyy-MM-dd HH:mm:ss"/>"
							   onclick="WdatePicker({dateFmt:'yyyy-MM-dd HH:mm:ss',isShowClear:false});"/>
					</div>
				</div>
				<div class="control-group">
					<label class="control-label">是否新品：</label>
					<div class="controls">
						<form:select path="isnew" class="input-xlarge ">
							<form:option value="" label=""/>
							<form:options items="${fns:getDictList('yes_no')}" itemLabel="label" itemValue="value" htmlEscape="false"/>
						</form:select>
					</div>
				</div>
				<div class="control-group">
					<label class="control-label">关键字：</label>
					<div class="controls">
						<form:input path="keywords" htmlEscape="false" maxlength="200" class="input-xlarge "/>
					</div>
				</div>
				<div class="control-group">
					<label class="control-label">备注：</label>
					<div class="controls">
						<form:textarea path="remarks" htmlEscape="false" rows="1" maxlength="100" class="input-xlarge "/>
					</div>
				</div>

			</div>
			<div class="tab-pane" id="tab2">
				<div class="control-group">
					<label class="control-label">详情描述：</label>
					<div class="controls">
						<form:textarea id="descript" htmlEscape="true" path="descript" rows="4" maxlength="200" class="input-xxlarge"/>
						<sys:ckeditor replace="descript" uploadPath="/shop/product" />
					</div>
				</div>
			</div>
			<div class="tab-pane" id="tab3" >

				<c:forEach items="${hkShopProduct.hkShopProductPropertyList}" var="hkShopProductProperty" varStatus="status">

					<c:if test="${hkShopProductProperty.property.ismultiple==0}">
					 <div class="control-group"><label class="control-label">${hkShopProductProperty.property.name}：</label><div class="controls">

						 <input type="hidden" name="hkShopProductPropertyList[${status.index}].categoryProperty.id" value="${hkShopProductProperty.categoryProperty.id}">
						 <input type="hidden" name="hkShopProductPropertyList[${status.index}].property.id" value="${hkShopProductProperty.property.id}">

						 <form:select path="hkShopProductPropertyList[${status.index}].propertyvalues" class="input-xlarge ">
							<form:options items="${hkShopProductProperty.property.hkShopPropertyValueList}" itemLabel="content" itemValue="id" htmlEscape="false"/>
						</form:select>
                        </div>
					 </div>
					</c:if>

					 <c:if test="${hkShopProductProperty.property.ismultiple=='1'}">
					<div class="control-group"><label class="control-label">${hkShopProductProperty.property.name}：</label><div class="controls"  >
						<input type="hidden" name="hkShopProductPropertyList[${status.index}].categoryProperty.id" value="${hkShopProductProperty.categoryProperty.id}">
						<input type="hidden" name="hkShopProductPropertyList[${status.index}].property.id" value="${hkShopProductProperty.property.id}">
						  	<c:forEach var="hkShopPropertyValueList" items="${hkShopProductProperty.property.hkShopPropertyValueList}">
						<input type="checkbox" name="hkShopProductPropertyList[${status.index}].propertyvalue"
								<c:if test="${fn:contains(hkShopProductProperty.propertyvalues,hkShopPropertyValueList.id)}"> checked </c:if>
							   value="${hkShopPropertyValueList.id}"/>${hkShopPropertyValueList.content}


					   </c:forEach>
					</div></div>
					</c:if>
				</c:forEach>


			</div>
			<div class="tab-pane" id="tab4">
				<div class="control-group">
					<label class="control-label">产品图片：</label>
					<div class="controls">
						<table id="contentTable" class="table table-striped table-bordered table-condensed">
							<thead>
							<tr>
								<th class="hide"></th>
								<th>图片</th>

								 <th width="10">&nbsp;</th>
							</tr>
							</thead>
							<tbody id="hkShopProductImagesList">
							</tbody>

							<tr><td colspan="5"><a href="javascript:" onclick="addRow('#hkShopProductImagesList', hkShopProductImagesRowIdx, hkShopProductImagesTpl);hkShopProductImagesRowIdx = hkShopProductImagesRowIdx + 1;" class="btn">新增</a></td></tr>
							</tfoot>
						</table>
						<script type="text/template" id="hkShopProductImagesTpl">//<!--
						<tr id="hkShopProductImagesList{{idx}}">
							<td class="hide">
								<input id="hkShopProductImagesList{{idx}}_id" name="hkShopProductImagesList[{{idx}}].id" type="hidden" value="{{row.id}}"/>
								<input id="hkShopProductImagesList{{idx}}_delFlag" name="hkShopProductImagesList[{{idx}}].delFlag" type="hidden" value="0"/>
							</td>

							<td>
								<input id="hkShopProductImagesList{{idx}}imgSrc" name="hkShopProductImagesList[{{idx}}].imgSrc" type="hidden" value="{{row.imgSrc}}" maxlength="100"/>
								<sys:ckfinder input="hkShopProductImagesList{{idx}}imgSrc" type="images" uploadPath="/shop/product" selectMultiple="false" maxWidth="60" maxHeight="60 "/>


							</td>


						 <td class="text-center" width="10">
								{{#delBtn}}<span class="close" onclick="delRow(this, '#hkShopProductImagesList{{idx}}')" title="删除">&times;</span>{{/delBtn}}
							</td>
						</tr>//-->
						</script>
						<script type="text/javascript">
                            var hkShopProductImagesRowIdx = 0, hkShopProductImagesTpl = $("#hkShopProductImagesTpl").html().replace(/(\/\/\<!\-\-)|(\/\/\-\->)/g,"");
                            $(document).ready(function() {
                                var data = ${fns:toJson(hkShopProduct.hkShopProductImagesList)};
                                for (var i=0; i<data.length; i++){
                                    addRow('#hkShopProductImagesList', hkShopProductImagesRowIdx, hkShopProductImagesTpl, data[i]);
                                    hkShopProductImagesRowIdx = hkShopProductImagesRowIdx + 1;
                                }
                            });
						</script>
					</div>
				</div>
			</div>
			<div class="tab-pane" id="tab5">


				<div class="control-group"><label class="control-label">规格：</label>

					<div class="controls">
					<c:forEach items="${hkShopProduct.categoryspecsList}" var="categoryspecs" varStatus="status">

						<input type="hidden" name="specsList[${status.index}].categorySpec.id" value="${categoryspecs.id}">

						<input type="checkbox" name="specsList[${status.index}].propertyvalue"
						<c:forEach var="specs" items="${hkShopProduct.specsList}">
								<c:if test="${fn:contains(specs.categorySpec.id,categoryspecs.id)}"> checked </c:if>
						</c:forEach>
							   value="${categoryspecs.id}"/><span>${categoryspecs.name}</span>

					</c:forEach>
					</div>
				</div>

				<div class="control-group"><label class="control-label">颜色：</label>

					<div class="controls">
						<c:forEach items="${hkShopProduct.categorycolorsList}" var="categorycolors" varStatus="status">

							<input type="hidden" name="colorsList[${status.index}].categoryColor.id" value="${categorycolors.id}">
							<input type="checkbox" name="colorsList[${status.index}].propertyvalue"
							<c:forEach var="colors" items="${hkShopProduct.colorsList}">
										<c:if test="${fn:contains(colors.categoryColor.id,categorycolors.id)}"> checked </c:if>
							</c:forEach>
								   value="${categorycolors.id}"/><span> ${categorycolors.name}</span>
						</c:forEach>
					</div>
				</div>

				<div class="controls">
					<table id="skusTable" class="table table-striped table-bordered table-condensed">
						<thead>
						<tr>
							<th class="hide"></th>
							<th>颜色</th>
							<th>规格</th>
							<th>价格</th>
							<th>数量</th>
							<th width="10">&nbsp;</th>
						</tr>
						</thead>
						<tbody id="skusList">
						</tbody>

						<%--<tr><td colspan="5"><a href="javascript:" onclick="addRow('#skusList', skusRowIdx, skusTpl);skusRowIdx = skusRowIdx + 1;" class="btn">新增</a></td></tr>--%>
						</tfoot>
					</table>
					<script type="text/template" id="skusTpl">//<!--
						<tr id="skusList{{idx}}">
							<td class="hide">
								<input id="skusList{{idx}}_id" name="skusList[{{idx}}].id" type="hidden" value="{{row.id}}"/>
								<input id="skusList{{idx}}_delFlag" name="skusList[{{idx}}].delFlag" type="hidden" value="0"/>
								<input id="skusList{{idx}}_product_id" name="skusList[{{idx}}].product.id" type="hidden" value="{{row.product.id}}"/>
								<input id="skusList{{idx}}_productColor_id" name="skusList[{{idx}}].productColor.id" type="hidden" value="{{row.productColor.id}}"/>
								<input id="skusList{{idx}}_productSpec_id" name="skusList[{{idx}}].productSpec.id" type="hidden" value="{{row.productSpec.id}}"/>


							</td>

							<td>
								<input id="skusList{{idx}}_productColor_name" readonly name="skusList[{{idx}}].productColor.name" type="text" value="{{row.productColor.name}}" maxlength="11" class="input-small "/>
							</td>
							<td>
							    <input id="skusList{{idx}}_productSpec_name" readonly name="skusList[{{idx}}].productSpec.name" type="text" value="{{row.productSpec.name}}" maxlength="11" class="input-small "/>
							</td>
							<td>
								<input id="skusList{{idx}}_integral" name="skusList[{{idx}}].integral" type="text" value="{{row.integral}}" maxlength="11" class="input-small "/>
							</td>
							<td>
							<input id="skusList{{idx}}_stocks" name="skusList[{{idx}}].stocks" type="text" value="{{row.stocks}}" maxlength="11" class="input-small "/>
							</td>

						 <td class="text-center" width="10">
								{{#delBtn}}<span class="close" onclick="delRow(this, '#skusList{{idx}}')" title="删除">&times;</span>{{/delBtn}}
							</td>
						</tr>//-->
					</script>
					<script type="text/javascript">
                        var skusRowIdx = 0, skusTpl = $("#skusTpl").html().replace(/(\/\/\<!\-\-)|(\/\/\-\->)/g,"");
                        var skudata
                        $(document).ready(function() {
                              skudata = ${fns:toJson(hkShopProduct.skusList)};
                            for (var i=0; i<skudata.length; i++){
                                addRow('#skusList', skusRowIdx, skusTpl, skudata[i]);
                                skusRowIdx = skusRowIdx + 1;
                            }
								$("input:checkbox[name^=specsList]").click(function() {
                                    colorSpecCheckbox();
								});
                            $("input:checkbox[name^=colorsList]").click(function() {
                                colorSpecCheckbox();
                            });
                            });
                        function colorSpecCheckbox(){
                            var specsList= new Array();
                            var colorsList= new Array();
                            $.each($('input:checkbox[name^=specsList]:checked'),function(){
                                specsList.push({id:$(this).val(),name:$(this).next().text()});
                            });
                            $.each($('input:checkbox[name^=colorsList]:checked'),function(){
                                colorsList.push({id:$(this).val(),name:$(this).next().text()});
                            });

                            var f=false;
                            for(j = 0,leni=specsList.length; j < leni; j++) {

                                for(i = 0,lenj=colorsList.length; i < lenj; i++) {
                                    f=false;
                                    debugger ;
                                    for (var d=0; d<skudata.length; d++){
                                        console.log(specsList[j].id+"_aaaaaaaa_"+skudata[d].productSpec.id+"_bbbbbb_"+colorsList[i].id+"_cccccc_"+skudata[d].productColor.id);
                                        if(specsList[j].id==skudata[d].productSpec.id&&colorsList[i].id==skudata[d].productColor.id){
                                               f=true;
                                               break;
										   }
                                    }

                                    if(!f){
                                        d=skudata[0];

                                        d.productSpec.id=specsList[j].id;
                                        d.productColor.id=colorsList[i].id;
                                        d.productSpec.name=specsList[j].name;
                                        d.productColor.name=colorsList[i].name;
                                        addRow('#skusList', skusRowIdx, skusTpl, d);

                                        skusRowIdx = skusRowIdx + 1;
                                        skudata.push(d);
                                    }
                                }


                            }


						}

					</script>
				</div>




			</div>
		</div>
	</div>




		<div class="form-actions">
			<shiro:hasPermission name="shop:product:hkShopProduct:edit"><input id="btnSubmit" class="btn btn-primary" type="submit" value="保 存"/>&nbsp;</shiro:hasPermission>
			<input id="btnCancel" class="btn" type="button" value="返 回" onclick="history.go(-1)"/>
		</div>

	</form:form>

	<script type="text/javascript">

        function addRow(list, idx, tpl, row){
            $(list).append(Mustache.render(tpl, {
                idx: idx, delBtn: true, row: row
            }));
            $(list+idx).find("select").each(function(){
                $(this).val($(this).attr("data-value"));
            });
            $(list+idx).find("input[type='checkbox'], input[type='radio']").each(function(){
                var ss = $(this).attr("data-value").split(',');
                for (var i=0; i<ss.length; i++){
                    if($(this).val() == ss[i]){
                        $(this).attr("checked","checked");
                    }
                }
            });
        }
        function delRow(obj, prefix){
            var id = $(prefix+"_id");
            var delFlag = $(prefix+"_delFlag");
            if (id.val() == ""){
                $(obj).parent().parent().remove();
            }else if(delFlag.val() == "0"){
                delFlag.val("1");
                $(obj).html("&divide;").attr("title", "撤销删除");
                $(obj).parent().parent().addClass("error");
            }else if(delFlag.val() == "1"){
                delFlag.val("0");
                $(obj).html("&times;").attr("title", "删除");
                $(obj).parent().parent().removeClass("error");
            }
        }
	</script>
</body>

</html>
